//  当写完了吃食物长身体的程序之后。。。
//  现在出现了最大的问题：怎么样让全部蛇身数据跟着蛇头一起动？！！

// 选中这个游戏地图
var land = document.getElementsByClassName('wrapper')[0];


// 生成蛇身以及蛇的位置
var snakeBody = [{x:0, y:0},{x:0,y:0},{x:0,y:0}];


//  分数：全局变量
var score = 0;

//  选中分数的标签
var getScore = document.getElementsByTagName('span')[0];

//  解决最大的问题
function followHead(){
    var len = snakeBody.length - 1;
    for(var i = len; i > 0; i --){
        snakeBody[i].x = snakeBody[i - 1].x;
        snakeBody[i].y = snakeBody[i - 1].y;
    }
}

//  删蛇尾 --> 蛇身数据复制 -->  判断方向 -->  下一格是否是食物 --> 创建蛇头

// 默认移动的函数
var direction = 'Default';  // 判断蛇正移动的方向
function alwaysMoveOn(){
    //  先在Js里默认创建一个蛇身 snakePart --> div
    // var snakePart = document.createElement('div');
    // snakePart.className = "snake";
    if(score < 2){
        var timer = setInterval(function(){
            //  显示分数
            getScore.innerHTML = score;
            //  一次移动就删除残影
            deleteBody(snakeBody.length - 1);
            //  删除之后蛇身数据复制！！！！！
            followHead();   //  算法核心
            if(direction == 'Default' || direction == 'Up'){
                if(-- snakeBody[0].y >= 0){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x,
                            pushY = snakeBody[snakeBody.length - 1].y + 1;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }else if(direction == 'Down'){
                if(++ snakeBody[0].y < 15){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x,
                            pushY = snakeBody[snakeBody.length - 1].y - 1;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }else if(direction == 'Left'){
                if(-- snakeBody[0].x >= 0){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x + 1,
                            pushY = snakeBody[snakeBody.length - 1].y;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }else if(direction == 'Right'){
                if(++ snakeBody[0].x < 20){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x - 1,
                            pushY = snakeBody[snakeBody.length - 1].y;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }
            if(keyPause){
                alert('暂停中...');
                keyPause = false;
            }
            if(score >= 2){
                clearInterval(timer);
                alwaysMoveOn();
            }
        },600)
    }else if(score < 5){
        var timer = setInterval(function(){
            //  显示分数
            getScore.innerHTML = score;
            //  一次移动就删除残影
            deleteBody(snakeBody.length - 1);
            //  删除之后蛇身数据复制！！！！！
            followHead();   //  算法核心
            if(direction == 'Default' || direction == 'Up'){
                if(-- snakeBody[0].y >= 0){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x,
                            pushY = snakeBody[snakeBody.length - 1].y + 1;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }else if(direction == 'Down'){
                if(++ snakeBody[0].y < 15){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x,
                            pushY = snakeBody[snakeBody.length - 1].y - 1;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }else if(direction == 'Left'){
                if(-- snakeBody[0].x >= 0){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x + 1,
                            pushY = snakeBody[snakeBody.length - 1].y;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }else if(direction == 'Right'){
                if(++ snakeBody[0].x < 20){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x - 1,
                            pushY = snakeBody[snakeBody.length - 1].y;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }
            if(keyPause){
                alert('暂停中...');
                keyPause = false;
            }
            if(score >= 5){
                clearInterval(timer);
                alwaysMoveOn();
            }
        },400)
    }else if(score < 9){
        var timer = setInterval(function(){
            //  显示分数
            getScore.innerHTML = score;
            //  一次移动就删除残影
            deleteBody(snakeBody.length - 1);
            //  删除之后蛇身数据复制！！！！！
            followHead();   //  算法核心
            if(direction == 'Default' || direction == 'Up'){
                if(-- snakeBody[0].y >= 0){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x,
                            pushY = snakeBody[snakeBody.length - 1].y + 1;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }else if(direction == 'Down'){
                if(++ snakeBody[0].y < 15){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x,
                            pushY = snakeBody[snakeBody.length - 1].y - 1;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }else if(direction == 'Left'){
                if(-- snakeBody[0].x >= 0){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x + 1,
                            pushY = snakeBody[snakeBody.length - 1].y;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }else if(direction == 'Right'){
                if(++ snakeBody[0].x < 20){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x - 1,
                            pushY = snakeBody[snakeBody.length - 1].y;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }
            if(keyPause){
                alert('暂停中...');
                keyPause = false;
            }
            if(score >= 9){
                clearInterval(timer);
                alwaysMoveOn();
            }
        },250)
    }else if(score < 14){
        var timer = setInterval(function(){
            //  显示分数
            getScore.innerHTML = score;
            //  一次移动就删除残影
            deleteBody(snakeBody.length - 1);
            //  删除之后蛇身数据复制！！！！！
            followHead();   //  算法核心
            if(direction == 'Default' || direction == 'Up'){
                if(-- snakeBody[0].y >= 0){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x,
                            pushY = snakeBody[snakeBody.length - 1].y + 1;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }else if(direction == 'Down'){
                if(++ snakeBody[0].y < 15){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x,
                            pushY = snakeBody[snakeBody.length - 1].y - 1;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }else if(direction == 'Left'){
                if(-- snakeBody[0].x >= 0){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x + 1,
                            pushY = snakeBody[snakeBody.length - 1].y;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }else if(direction == 'Right'){
                if(++ snakeBody[0].x < 20){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x - 1,
                            pushY = snakeBody[snakeBody.length - 1].y;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }
            if(keyPause){
                alert('暂停中...');
                keyPause = false;
            }
            if(score >= 14){
                clearInterval(timer);
                alwaysMoveOn();
            }
        },150)
    }else if(score < 20){
        var timer = setInterval(function(){
            //  显示分数
            getScore.innerHTML = score;
            //  一次移动就删除残影
            deleteBody(snakeBody.length - 1);
            //  删除之后蛇身数据复制！！！！！
            followHead();   //  算法核心
            if(direction == 'Default' || direction == 'Up'){
                if(-- snakeBody[0].y >= 0){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x,
                            pushY = snakeBody[snakeBody.length - 1].y + 1;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }else if(direction == 'Down'){
                if(++ snakeBody[0].y < 15){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x,
                            pushY = snakeBody[snakeBody.length - 1].y - 1;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }else if(direction == 'Left'){
                if(-- snakeBody[0].x >= 0){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x + 1,
                            pushY = snakeBody[snakeBody.length - 1].y;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }else if(direction == 'Right'){
                if(++ snakeBody[0].x < 20){
                    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
                    if(snakeBody[0].x == foodX && snakeBody[0].y == foodY){
                        score ++;
                        var pushX = snakeBody[snakeBody.length - 1].x - 1,
                            pushY = snakeBody[snakeBody.length - 1].y;
                        snakeBody.push({x: pushX, y: pushY});
                        createSnakeBody(snakeBody.length - 1);
                        setFood();
                    }else if(grandSon.innerHTML){
                        alert('You lose!!! Game over!!!');
                        clearInterval(timer);
                        location.reload();
                    }
                    grandSon.innerHTML = '<div class="snake"></div>'; 
                }else{
                    alert('You lose!!! Game over!!!');
                    clearInterval(timer);
                    location.reload();
                }
            }
            if(keyPause){
                alert('暂停中...');
                keyPause = false;
            }
            if(score >= 20){
                clearInterval(timer);
                alwaysMoveOn();
            }
        },80)
    }
}


// 随机生成食物的函数
var foodX,
    foodY;
function setFood (){
    foodX = parseInt(Math.random() * 20);
    foodY = parseInt(Math.random() * 15);
    var grandSon = land.children[foodY].children[foodX];
    if(!grandSon.hasChildNodes()){
        // var food = document.createElement('div');
        // food.className = "food";
        // grandSon.appendChild(food);
        grandSon.innerHTML = '<div class="food"></div>';
    }else{
        setFood();
    }
}



//  蛇头和蛇尾的生成
function createSnake (){
    snakeBody[0].x = 10;
    snakeBody[0].y = 7;
    var grandSon = land.children[snakeBody[0].y].children[snakeBody[0].x];
    grandSon.innerHTML = '<div class="snake"></div>';
    snakeBody[1].x = 10;
    snakeBody[1].y = 8;
    grandSon = land.children[snakeBody[1].y].children[snakeBody[1].x];
    grandSon.innerHTML = '<div class="snake"></div>';
    snakeBody[2].x = 10;
    snakeBody[2].y = 9;
    grandSon = land.children[snakeBody[2].y].children[snakeBody[2].x];
    grandSon.innerHTML = '<div class="snake"></div>';
    // if(!grandSon.hasChildNodes()){
    //     var snakePart = document.createElement('div');
    //     snakePart.className = "snake";
    //     grandSon.appendChild(snakePart);
    // }else{
    //     createSnake();
    // }
}


//  在新的方向上生成蛇身
function createSnakeBody (i){
    var grandSon = land.children[snakeBody[i].y].children[snakeBody[i].x];
    grandSon.innerHTML = '<div class="snake"></div>';
}



//  删除不要的蛇身
function deleteBody (i){
    var grandSon = land.children[snakeBody[i].y].children[snakeBody[i].x];
    var body = grandSon.children[0];
    body.remove();
}


// 在整个页面上监听按键事件
document.addEventListener('keydown',function(e){
    if(e.code == 'ArrowUp'){
        direction = 'Up';
    }
    if(e.code == 'ArrowDown'){
        direction = 'Down';
    }
    if(e.code == 'ArrowLeft'){
        direction = 'Left';
    }
    if(e.code == 'ArrowRight'){
        direction = 'Right';
    }
},false)



//  设置一个钥匙key，使得start只能点一下好使
var keyStart = true,
    keyPause = false;
// start点击事件
var start = document.getElementsByClassName('start')[0];
start.addEventListener('click',function(){
    if(keyStart){
        createSnake();
        setFood();
        alwaysMoveOn();
        keyStart = false;
    }
},false)

// // pause点击事件
// var pause = document.getElementsByClassName('pause')[0];
// pause.addEventListener('click',function(){
//     // keyPause = true;
// },false)
